<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <h5 style="text-align: center">智慧校园管理端</h5>
                <el-menu
                    router
                    unique-opened
                    background-color="transparent"
                    class="el-menu-vertical-demo"
                    :default-active="data.activeIndex"
                >
                    <template v-for="item in data.personMenus">
                        <el-sub-menu
                            :key="item.path"
                            v-if="item.children"
                            :index="item.path"
                        >
                            <template #title>
                                <svg class="icon" aria-hidden="true" style="margin-right: 10px">
                                    <use :xlink:href="item.icon"></use>
                                </svg>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item
                                    v-for="chd in item.children"
                                    :index="chd.path"
                                    :key="chd.path"
                                >
                                    <svg class="icon" aria-hidden="true" style="margin-right: 10px">
                                        <use :xlink:href="chd.icon"></use>
                                    </svg>
                                    <span>{{ chd.name }}</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-menu-item
                            :key="item.path"
                            v-else
                            :index="item.path"
                        >
                            <svg class="icon" aria-hidden="true" style="margin-right: 10px">
                                <use :xlink:href="item.icon"></use>
                            </svg>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <el-icon class="el-icon-setting" style="margin-right: 15px"/>
                        <el-dropdown-menu>
                            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="updatepassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>{{ data.userInfo.loginName }}({{ data.userInfo.roleName }})</span>
                </el-header>
                <el-main>
                    <router-view ref="child"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {getUserInfo} from "@/utils/auth";
import {onMounted, reactive} from "vue";

export default {
    setup() {
        const data = reactive({
            userInfo: getUserInfo(),
            activeIndex: 1,
            personMenus: [],
        })
        const indexMenus = () => {
            const userInfo = getUserInfo();
            let menus = userInfo.menuVOS
            menus = menus.filter(menu => {
                return !menu.isHidden
            })
            menus.map(menu => {
                if (menu.hasChildren){
                    menu.children = []
                }
            })
            menuFunction(menus)
        }
        const menuFunction = (menus) => {
            menus.forEach(menu => {
                if (menu.parentUuid === '0') {
                    data.personMenus.push(menu)
                } else {
                    const parentMenu = menus.find(item => item.uuid === menu.parentUuid)
                    parentMenu.children.push(menu)
                    // TODO 三级菜单
                    // if (menu.hasChildren) {
                    //     menuFunction([menu])
                    // }
                }
            })
        }
        onMounted(() => {
            indexMenus()
        })
        return {
            data,
            indexMenus
        }
    }
    // data() {
    //   return {
    //     userInfo: getUserInfo(),
    //   };
    // },
    // computed: {
    //   activeIndex() {
    //     const {path} = this.$route;
    //     const arr = menus.filter((menu) => path.startsWith(menu.path));
    //     return arr.length ? arr[0].path : "";
    //   },
    //   menus() {
    //     const userInfo = getUserInfo();
    //     const roleCode = userInfo.role.js.code;
    //     return menus.filter((menu) => {
    //       if (menu.auth) {
    //         return menu.auth.includes(roleCode);
    //       }
    //       return true;
    //     });
    //   },
    // },
    // methods: {
    //   handCommand(command) {
    //     if (command === "logout") {
    //       this.logout();
    //     }
    //     if (command === 'userinfo') {
    //       this.toUserInfo();
    //     }
    //     if (command === 'updatepassword') {
    //       this.toUpdatePassword();
    //     }
    //   },
    //   logout() {
    //     removeToken();
    //     removeUserInfo();
    //     Message({
    //       message: "退出成功",
    //       type: "success",
    //       duration: 2 * 1000,
    //     });
    //     // 跳转到登录页面
    //     setTimeout(() => {
    //       this.$router.push("/login");
    //     }, 1000);
    //   },
    //   /**
    //    * 跳转到用户信息页面
    //    */
    //   toUserInfo() {
    //     this.$router.push("/user-info").catch(() => {
    //     });
    //   },
    //   /**
    //    * 跳转到修改密码页面
    //    */
    //   toUpdatePassword() {
    //     this.$router.push("/update-password").catch(() => {
    //     });
    //   }
    // },
};
</script>

<style scoped>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    height: auto;
}
</style>
